<template>
  <div class="searchTable">
    <a-modal :visible="visible" width="65%" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="hideData()">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="人员姓名">
              <BaseInput v-model="form.accountName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item label="人员编码">
              <BaseInput v-model="form.accountCode" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" class="btn_right">
              查询
            </a-button>
            <a-button>
              重置
            </a-button>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="10">
            <a-form-model-item label="所属单位">
              <BaseInput v-model="form.company" />
            </a-form-model-item>
          </a-col>
          <a-col :span="10">
            <a-form-model-item label="所属部门">
              <BaseInput v-model="form.department" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <div>
        <a-table
          :pagination="false"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
          :columns="columns"
          :data-source="data"
          type="radio"
        />
        <pagination
          :total="total"
          v-model="pageNo"
          :pageSize.sync="pageSize"
          @change="handlePageChange"
          @showSizeChange="showSizeChange"
        ></pagination>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { columns } from './accountModel'
import { baseSave } from '@/api/basePage'
export default {
  name: 'searchTable',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    addType: {
      type: String,
      default: null
    },
    projectId: {
      // 项目id
      type: String,
      default: null
    }
  },
  data() {
    return {
      form: {
        accountName: null, // 人员姓名
        accountCode: null, // 人员编码
        company: null, // 所属单位
        department: null // 所属部门
      },
      total: 0,
      pageNo: 1,
      pageSize: 5,
      totalPage: null, // 总条数
      projectID: null,
      selectedRows: null, // 选中的当前行数据
      data: [],
      columns: columns,
      selectedRowKeys: [], // Check here to configure the default column
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      ModalText: 'Content of the modal',
      // visible: false,
      confirmLoading: false
    }
  },
  watch: {
    projectId: {
      handler(val) {
        this.projectID = val
      },
      immediate: true
    },
    visible: {
      handler(val) {
        this.getTable()
      },
      immediate: true
    }
  },
  methods: {
    getTable() {
      let param = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$$post(this.$$api.material.linkManList(), param).then(res => {
        if (res.code) {
          this.data = res.data
        } else {
        }
      })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    hideData() {
      this.$emit('hideDialog')
    },
    showModal() {
      // this.visible = true
    },
    handlePageChange(pageNo, pageSize) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.getTable()
    },
    showSizeChange(pageNo, pageSize) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.getTable()
    },
    save(api) {
      let param = (this.selectedRows[0].projectId = this.projectID)
      baseSave(this, api, param).then(res => {
        if (res) {
          this.$parent.getTable()
          this.hideData()
        }
      })
    },
    handleOk() {
      if (this.addType === 'equipment') {
        this.$emit('linkMan', this.selectedRows[0])
        this.hideData()
        // 机械设备需用总计划（总计划）
      } else if (this.addType === 'material') {
        // 物资新增（总计划）
      }
    }
  }
}
</script>
<style lang="less" scoped>
.searchTable {
  .form_flex {
    display: flex;
    justify-content: space-between;
  }
}
</style>
